<template>
	<view>
		<view class="lb-main-32">
			<!-- 收货地址 -->
			<view class="lb-main-box" style="position: relative;border-radius: 16rpx 16rpx 0 0 ;"
				v-if="FormData.way == 1">
				<view class="lb-title">
					<image src="/static/icon/map-order.png" mode=""></image>
					<text>收货地址</text>
				</view>

				<view class="addr-item" v-if="addrObj.contact"
					@click="goTo('/pages/users/my-address/my-address?type=3')">
					<view class="addr-info">
						<view class="addr-top">
							<text>{{addrObj.contact}}</text>
							<text>{{addrObj.mobile}}</text>
						</view>
						<view class="addr-foot">
							{{addrObj.district}}{{addrObj.address}}
						</view>
					</view>
					<view class="addr-icon">
						<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
					</view>
				</view>
				<view class="addr-item" @click="goTo('/pages/users/my-address/my-address?type=3')" v-else>
					<text>请选择地址</text>
					<view class="addr-icon">
						<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
					</view>
				</view>
				<view class="foot">
					<image src="/static/icon/foot.png" mode=""></image>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="lb-main-box" style="position: relative;border-radius: 16rpx 16rpx 0 0 ;">
				<view class="lb-title">
					<image src="/static/icon/map-order.png" mode=""></image>
					<text>订单详情</text>
				</view>

				<view class="order-item">
					<view class="order-left">
						订单金额
					</view>
					<view class="order-right price-1">
						{{showPrice}}
					</view>
				</view>
				<view class="order-item" @click="yhq" v-if="!rowData.is_free_activity">
					<view class="order-left">
						优惠券 <text>{{rowData.coupon_num || 0}}张可用优惠券</text>
					</view>
					<view class="order-right" style="display: flex;align-items: center;">
						<view class="yh-price">
							{{discount_amount}}
						</view>
						<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
					</view>

				</view>
				<view class="order-item" v-if="FormData.way == 1">
					<view class="order-left">
						运费
					</view>
					<view class="order-right price-3">
						{{rowData.freight || 0}}
					</view>
				</view>
				<view class="order-textarea">
					<textarea v-model="FormData.comment" cols="30" rows="10" maxlength="30"
						placeholder="请输入您的留言或备注，不超过30个字"
						placeholder-style="font-size: 24rpx; font-weight: 400; color: #CCCCCC;">
						</textarea>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="lb-main-box" style="position: relative;">
				<view class="lb-title2">
					<view class="text">
						{{rowData.order_number}}
					</view>
					<view class="text">
						{{rowData.createtime}}
					</view>
				</view>
				<view class="lb-line">
				</view>
				<view class="lb-goods" v-if="rowData.goods">
					<view class="g-box">
						<view class="g-left">
							<view class="img">
								<image :src="getImgUrl(rowData.goods.cover_image)" mode=""></image>
							</view>
							<view class="name">
								{{rowData.goods.name}}
							</view>
						</view>
						<view class="g-right">
							{{rowData.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 170rpx;">

		</view>
		<view class="lb-foot">
			<view class="price">
				<text>实付：</text>
				<text>{{showPrice * 1 + rowData.freight * 1}}</text>
			</view>
			<view class="price">
				<text>优惠金额：</text>
				<text>{{discount_amount}}</text>
			</view>
			<view class="btn" @click="formSubmit">
				立即支付
			</view>
		</view>

		<!-- 选择门店 -->
		<u-popup :show="show" @close="show = false" @open="open">
			<view class="up-box">
				<view class="up-list">
					<!-- <view class="up-main-box"> -->
					<view class="up-box bor-b" v-for="(item,index) in listData" :key="index" @click="selectShop(item)">
						<view class="up-bleft">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tel">
								<text>{{item.contact}}</text>
								<text class="phone-link" @click.stop="calPhone(item.phone)">{{item.phone}}</text>
							</view>
						</view>
						<div>
							<view class="distance">{{item.distance}}km</view>
							<view class="up-bright" @click.stop="goAddress(item)">
								<image src="/static/icon/map-order.png"></image>
								<text>{{item.address}}</text>
							</view>
						</div>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</u-popup>

		<!-- 选择时间 -->
		<u-popup :show="timeShow" @close="timeShow = false" @open="open1">
			<view class="up-box">
				<view class="up-title">
					<view class="icon" @click="timeShow = false">
						<image src="/static/icon/cancel.png" mode=""></image>
					</view>
					<view class="text">
						期望上门时间
					</view>
					<view class="btn" @click="cTime">
						确定
					</view>
				</view>
				<view class="up-time">
					<view class="time-left">
						<view class="left-item" :class="leftIndex == index?'active':''" v-for="(item,index) in weekData"
							:key="index" @click="clickLeft(item,index)">
							{{item.week_txt}}
						</view>
					</view>
					<view class="time-right">
						<view class="right-item" :class="rightIndex == index?'active':''"
							v-for="(item,index) in timeArr" :key="index" @click="clickRight(item,index)">
							{{item.start_time}}-{{item.end_time}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		xmyOrderDetail,
		getMyAddrApiDetail,
		payTravel
	} from "@/api/apis/wash.js"
	import {
		setImgUrl,
		lastweek,
		compareH,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				isPick: 0,
				pickData: [{
						id: 1,
						name: '上门取送',
						tip: '订单金额不满40加15元运费'
					},
					{
						id: 2,
						name: '自送',
						tip: '免邮费，免上门费'
					}
				],
				keyword: '',
				show: false,
				shopText: '',
				timeShow: false,
				timeText: '',
				popleft: [],
				popright: [],
				timeArr: [],
				leftIndex: 0,
				rightIndex: 0,
				order_id: '',
				rowData: '',
				FormData: {
					order_id: '', //订单ID
					coupon_id: 0, //优惠券ID
					comment: '', //订单备注
					hope_time: '', //期望上门时间
					store_id: 0, //门店ID
					way: 1, //取送方式:1=上门取送,2=自送
					address_id: 0, //地址ID
					// contact: '',
					// mobile: '',
					// district: '',
					// address: '',
				},
				latitude: 39.909,
				longitude: 116.39742,
				page: 1,
				limit: 1,
				listData: [],
				isLoading: false,
				discount_amount: 0,
				dateInde: 0,
				addrObj: '',
				couponObj: '',
				dq_day: true,

			}
		},
		onLoad(options) {
			this.order_id = options.id;
			this.getOneWeek();
			this.getData();
			uni.$on('addrObj', res => {
				// console.log(res)
				this.addrObj = res;
				this.FormData.address_id = res.id;
			})
			uni.$on('couponObj', res => {
				// console.log(res)
				this.couponObj = res;
				this.FormData.coupon_id = res.coupon.id;
				// this.discount_amount = res.coupon.type == 2 ? res.coupon.discount_amount : (this.rowData.price * (res.coupon.discount_amount / 100)).toFixed(2);
				this.discount_amount = res.coupon.discount_amount
			})
		},
		onUnload() {
			// 移除监听事件
			// console.log(this.subData)
			uni.$off('addrObj');
			uni.$off('couponObj');

		},
		methods: {
			goAddress(item) {
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lng,
					name: item.name,
					address: item.address,
					success: function() {
						console.log('success');
					}
				});
			},
			calPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone + ""
				})
			},
			//提交
			formSubmit() {
				let _this = this;
				if (!this.FormData.address_id) {
					this.$u.toast('请选择地址!');
					return;
				}
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				payTravel(this.FormData).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let sign = res.data;
						console.log(sign)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: sign.timeStamp.toString(),
							nonceStr: sign.nonceStr,
							package: sign.package,
							signType: 'MD5',
							paySign: sign.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showModal({
									showCancel: false,
									title: "温馨提示",
									content: "支付成功",
									success() {
										uni.navigateTo({
											url: '/pages/xmy/order-list/order-list?current=1'
										})
									}
								})
							},
							fail: function(err) {
								uni.showToast({
									title: "取消支付",
									icon: 'none'
								})
								uni.navigateTo({
									url: '/pages/jia-kao/home/home'
								})
								// console.log(err)
							}
						});

					}
				})

			},
			getDay() {
				return fmtFormat('', 'yyyy-MM-dd');
			},
			getHour() {
				let now = new Date();
				// 限制只要三小时以后得
				let hour = now.getHours() + 3;
				let min = now.getMinutes();

				if (hour < 10) {
					hour = '0' + hour.toString()
				}
				if (min < 10) {
					min = '0' + min.toString()
				}
				return hour + ':' + min;
			},
			pdHour(startTime) {
				let dqHour = this.getHour();
				return compareH(startTime, dqHour);
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//
			yhq() {
				if (this.rowData.coupon_num > 0) {
					uni.navigateTo({
						url: '/pages/users/coupon/coupon?type=3&money=' + this.rowData.total_price,
					})
				}
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//
			getOneWeek() {
				let arr = [];
				for (let i = this.dateInde; i < 7; i++) {
					let isToDay = i == 0 ? 1 : 0;
					arr.push(lastweek(isToDay, i))
				}
				// return arr;
				this.popleft = arr;
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			bindChange(e) {
				console.log(e, '----126---')
			},
			//订单详情
			getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				xmyOrderDetail({
					order_id: this.order_id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.rowData = res.data;
						this.FormData.order_id = res.data.id;
						this.getAddr(res.data.address_id)
					}
				})
			},
			getAddr(address_id) {
				getMyAddrApiDetail({
					address_id: address_id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let data = res.data;
						this.FormData.address_id = data ? data.id : 0;
						this.addrObj = data ? data : {};
					}
				})
			},

		},

		computed: {
			weekData() {
				return this.popleft;
			},
			showPrice() {
				return (this.rowData.price - this.discount_amount).toFixed(2) * 1
			}
		},
	}
</script>

<style lang="scss">
	.up-box {
		width: 100%;
		height: 750rpx;



	}

	.up-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 2rpx solid #F5F5F5;

		.icon {
			width: 36rpx;
			height: 36rpx;
		}

		.text {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.btn {
			font-size: 28rpx;
			font-weight: bold;
			color: #F65D40;
		}
	}


	.up-time {
		width: 100%;
		display: flex;
		flex-direction: row;

		.time-left {
			background-color: #F5F5F5;
			width: 280rpx;
			display: flex;
			flex-direction: column;
			height: 650rpx;
			overflow-y: scroll;

			.left-item {
				width: 280rpx;
				height: 110rpx;
				font-size: $main-font-28;
				color: $main-font-color;
				line-height: 108rpx;
				text-align: left;
				padding-left: 24rpx;
			}

			.active {
				font-weight: bold;
				color: #F65D40;
				background-color: $main-bg-color;
				box-sizing: border-box;
			}
		}

		//右边
		.time-right {
			background-color: $main-bg-color;
			width: calc(100% - 280rpx);
			display: flex;
			flex-direction: column;
			height: 650rpx;
			overflow-y: scroll;

			.right-item {
				width: 280rpx;
				height: 110rpx;
				font-size: $main-font-28;
				color: $main-font-color;
				line-height: 108rpx;
				text-align: center;
			}

			.active {
				font-weight: bold;
				color: #F65D40;
				box-sizing: border-box;
			}
		}
	}

	.up-search {
		width: 100%;
		padding: 32rpx 32rpx 0 32rpx;
		box-sizing: border-box;
	}

	.up-list {
		width: 100%;
		height: 600rpx;
		overflow-y: scroll;

		.up-box {
			width: 100%;
			height: 154rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F5F5F5;

			.up-bleft {
				.name {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color;
					padding-bottom: 4rpx;
				}

				.tel {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color;

					text {
						&:nth-of-type(2) {
							padding-left: 24rpx;
						}
					}
				}

				.phone-link {
					color: #00D26E;
				}
			}

			.distance {
				font-size: $main-font-24;
				text-align: right;
				margin-bottom: 10rpx;
			}

			.up-bright {
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: $main-font-24;
					font-weight: 400;
					color: #00D26E;
				}
			}
		}




	}


	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	//线条
	.lb-line {
		position: absolute;
		left: 0rpx;
		top: 72rpx;

		width: calc(100% - 2rpx);
		height: 0rpx;
		border: 2rpx solid #CCCCCC;
	}

	.foot {
		position: absolute;
		width: calc(100% - 0rpx);
		height: 4rpx;
		left: 0;
		bottom: 0;
	}


	.lb-title {
		display: flex;
		flex-direction: row;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		text {
			font-size: $main-font-32;
			font-weight: bold;
			color: $main-font-color;
			padding-left: 18rpx;
		}
	}

	.lb-title2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.text {
			font-size: $main-font-28;
			font-weight: 400;
			color: $main-font-color;
		}
	}

	//取货方式
	.take-pick {
		.pick-item {
			.item-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20rpx 0;

				.left {
					display: flex;
					flex-direction: row;

					.name {
						font-size: $main-font-28;
						font-weight: 400;
						color: $main-font-color;
					}

					.tip {
						font-size: $main-font-24;
						font-weight: 400;
						color: $main-font-color-grey9;
						padding-left: 24rpx;
					}
				}

				.right {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.lb-time {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				text {
					font-size: $main-font-24;
					font-weight: 400;
					color: #333;
				}
			}

		}

	}

	// 地址
	.addr-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: $main-font-28;
			color: $uni-text-color;
			padding: 12rpx 0;
		}

		.addr-info {
			display: flex;
			flex-direction: column;

			.addr-top {
				text {
					font-size: $main-font-28;
					font-weight: bold;
					color: $uni-text-color;

					&:nth-of-type(2) {
						font-weight: 400;
						padding-left: 44rpx;
					}
				}
			}

			.addr-foot {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color-grey6;
			}
		}

		.addr-icon {}
	}

	//订单详情
	.order-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 14rpx 0;

		.order-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: $main-font-28;
			font-weight: 400;
			color: $main-font-color;

			text {
				font-size: $main-font-20;
				font-weight: 400;
				color: #F65D40;
				padding-left: 18rpx;
			}
		}

		.order-right {
			font-size: $main-font-28;
			font-weight: 400;
			color: $main-font-color;

			.yh-price {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color;

				&::before {
					content: '- ¥';
					font-size: $main-font-20;
				}
			}
		}

		.price-1 {
			&::before {
				content: '¥';
				font-size: $main-font-20;
			}
		}




		.price-3 {
			&::before {
				content: '+ ¥';
				font-size: $main-font-20;
			}
		}
	}

	//备注
	.order-textarea {
		height: 120rpx;
		background: rgba(245, 245, 245, 0.39);
		border: 2rpx solid #CCCCCC;
		border-radius: 16rpx;

		textarea {
			width: 100%;
			height: 120rpx;
			padding: 16rpx;
			font-size: $main-font-24;
			font-weight: 400;
			color: $main-font-color;
		}

	}

	.bor-t {
		border-top: 2rpx solid #F5F5F5;
	}

	//商品
	.lb-goods {
		position: relative;
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;


		.g-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 14rpx 0;

			.g-left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.img {
					width: 80rpx;
					height: 80rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
					border-radius: 8rpx;
				}

				.name {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color;
					padding-left: 24rpx;
				}
			}

			.g-right {
				font-size: $main-font-28;
				font-weight: 400;
				color: #F65D40;

				&::before {
					content: '¥';
				}
			}
		}
	}

	.lb-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		bottom: calc(0rpx + env(safe-area-inset-bottom));
		width: 100%;
		height: 166rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;

		.price {
			text {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color;


				&:nth-of-type(2) {
					font-size: $main-font-28;
					// font-weight: bold;
					color: #F65D40;

					&::before {
						content: '¥';
						// font-size: $main-font-20;
					}
				}
			}
		}

		.btn {
			width: 180rpx;
			height: 80rpx;
			border-radius: 44rpx;
			background: linear-gradient(133deg, #F7583F 0%, #F28F4C 100%);
			line-height: 78rpx;
			text-align: center;

			font-size: $main-font-28;
			font-family: PingFang SC;
			font-weight: 400;
			color: $main-font-color-white;
		}
	}
</style>
